<%-- 
    Document   : minimap
    Created on : May 14, 2012, 8:01:21 PM
    Author     : Johan
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%-- Note: deze pagina moet aangeroepen worden vanuit een <ul> </ul> blok. --%>

<html>
    <head>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var directionDisplay;
            var directionsService = new google.maps.DirectionsService();
            var map;
            var myPoints=new Array();

            function initialize() {
                directionsDisplay = new google.maps.DirectionsRenderer();  
                var nederland = new google.maps.LatLng(52.153714, 5.194287);
                var myOptions = {
                    zoom:6,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: nederland
                }
                map = new google.maps.Map(document.getElementById("mini_maps"), myOptions);
                directionsDisplay.setMap(map);
                calcRoute();
            }
  
            function calcRoute() {
                var start = "${googleVan}"; 
                var end = "${googleNaar}";
                var request = {
                    origin:start, 
                    destination:end,
   
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                        getAllSteps(response);
                    }
      
                });
            }
            
            function getAllSteps(directionResult){
                //document.write(directionResult.routes[0].overview_path[0].toString()); //ipv string kan ook lat() of lng()

                //var msg = "";
                for(var x = 0 ; x < directionResult.routes[0].overview_path.length ; x++) {
                    myPoints[x] = directionResult.routes[0].overview_path[x].toString();
                    //    msg = msg + directionResult.routes[0].overview_path[x].toString()+ "\n"; 
                }
                //msg = msg + "eind";
                //alert(msg);
            }
            
        </script>

    </head>
    <body>
    <li>
        <h2>minimap</h2>
    <center>
        <div id="mini_maps">

            <script>initialize();</script><!--  hier moet googlemaps komen!!!  -->


        </div>
    </center>
</li>
</body>
</html>

